<template>
  <div class="rank">
    <load v-show="!topList.length"></load>
    <scroll class="toplist">
      <ul>
        <li @click="selectTop(item)" v-for="item in topList" :key="item.id" class="item">
          <div class="icon">
            <img :src="item.picUrl">
          </div>
          <ul class="songlist">
            <li v-for="songList in item.songList"  class="song">
              <span>{{songList.songname}}</span>
              <span>{{songList.singername}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import scroll from '../base/scroll'
import {mapMutations} from 'vuex'
import load from '../base/load'
export default {
  data() {
    return {
      params: {
        _: 1552550856320,
        g_tk: 5381,
        uin: 0,
        format: 'json',
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'h5',
        needNewCode: 1
      },
      topList: []
    }
  },
  methods: {
    ...mapMutations({
      setTop: 'SET_TOP'
    }),
    getTop() {
      this.axios
        .get('/api/v8/fcg-bin/fcg_myqq_toplist.fcg?', { params: this.params })
        .then(res => {
          if (res.status == 200) {
            let str = res.data.substring(18)
            let len = str.length
            let data = str.substring(0, len - 1)
            this.topList = JSON.parse(data).data.topList
          }
        })
    },
    selectTop(item) {
      this.$router.push({
        path: `/rank/${item.id}`
      })
      this.setTop(item)
    }
  },
  components: {
    scroll,
    load
  },
  created() {
    this.getTop()
  }
}
</script>
<style lang="scss" scoped>
    .rank{
        position: fixed;
        width: 100%;
        top:88px;
        bottom: 0;
        .toplist{
            height: 100%;
            overflow: hidden;
            .item{
                display: flex;
                height: 100px;
                padding: 10px 0;

                .icon{
                    flex: 0 0 100px;
                    height: 100px;
                    width: 100px;
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
                .songlist{
                    flex: 1;
                    display: flex;
                    flex-direction: column-reverse;
                    justify-content: center;
                    font-size: 12px;
                    padding: 0 20px;
                    height: 100px;
                    overflow: hidden;
                    background-color: rgba(255, 255, 255, 0.3);
                    color: rgba(255, 255, 255, 0.8);
                    .song{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 26px;

                    }
                }
            }
        }
    }
</style>
